<template>
  <div class="wraps">
    <!-- 左上 本年专利授权数实时排名 -->
    <div class="upperleft">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">本年专利授权数实时排名</span>
        </div>
        <div style="font-size: 16px">
          <BndZlSqsSsPm></BndZlSqsSsPm>
        </div>
      </el-card>
    </div>

    <!-- 左下 专利授权实时动态 -->
    <div class="lowerLeft">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">专利授权实时动态</span>
        </div>
        <div style="font-size: 16px">
          <ZlSqSsDt></ZlSqSsDt>
        </div>
      </el-card>
    </div>

    <!--中上 知识产权统计-->
    <div class="soso">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">知识产权统计</span>
        </div>
        <ZsCqTj></ZsCqTj>
      </el-card>
    </div>

    <!-- 中下 荣誉成果 -->
    <div class="lowerMiddle">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">图片展示</span>
        </div>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in xmKbImgList" :key="item.name">
            <img class="img" :src="item.src" alt="图片丢失了" :title="item.title">
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>

    <!-- 右上 核心专利分布 -->
    <div class="upperRight">
      <el-card class="box-card" shadow="hover" style="height: 43.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">核心专利分布</span>
        </div>
        <HxZlFb/>
      </el-card>
    </div>

    <!-- 右下 专利申请实时跟踪 -->
    <div class="lowerRight">
      <el-card class="box-card" shadow="hover" style="height: 44.2vh">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">专利申请实时跟踪</span>
        </div>
        <ZlSqSsGz/>
      </el-card>
    </div>

  </div>
</template>

<script>
import BndZlSqsSsPm from "@/views/zscq/zscqkb/bndZlSqsSsPm.vue";
import ZsCqTj from "@/views/zscq/zscqkb/zsCqTj.vue";
import ZlSqSsDt from "@/views/zscq/zscqkb/zlSqSsDt.vue";
import HxZlFb from "@/views/zscq/zscqkb/hxZlFb.vue";
import ZlSqSsGz from "@/views/zscq/zscqkb/zlSqSsGz.vue";
export default {
  name: 'Zscqkb',
  components: {ZlSqSsGz, HxZlFb, BndZlSqsSsPm, ZsCqTj, ZlSqSsDt},
  data() {
    return {
      xmKbImgList: [
        {
          name: '2022',
          src: require('../../../assets/images/xmgl-xmkb-tpzs/2022年科技创新先进集体.jpg')
          // title: "2022年科技创新先进集体"
        },
        {
          name: '2021',
          src: require('../../../assets/images/xmgl-xmkb-tpzs/2021年科技创新先进集体.jpg')
          // title: "2021年科技创新先进集体"
        },
        {
          name: '2020',
          src: require('../../../assets/images/xmgl-xmkb-tpzs/2020年科技创新先进集体.jpg')
          // title: "2020年科技创新先进集体"
        }
      ]
    }
  },
  created() {

  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 1%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 左下 */
.lowerLeft {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 1%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 中上 */
.soso {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 32%; /* 距离左侧1% */
  width: 36%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 中下 */
.lowerMiddle {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 32%; /* 距离左侧1% */
  width: 36%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 51%; /* 距离下面 60% */
  left: 69%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* 右下 */
.lowerRight {
  position: absolute;
  top: 50%; /* 距离上面 43% */
  bottom: 1%; /* 距离下面 50% */
  left: 69%; /* 距离左侧1% */
  width: 30%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}

/* header 头部背景 */
/deep/ .el-card__header {
  padding: 6px 15px 7px;
  min-height: 30px;
  background-color: #D9EDF7;
}

/deep/ .el-card__body {
  padding: 2px 20px 20px 20px;
  height: 40vh;
}

.lowerMiddle /deep/ .el-card__body{
  padding: 20px;
  box-sizing: border-box;
  height: calc(100% - 40px) !important;
}
.lowerMiddle /deep/ .el-carousel{
  height: 100%;
}
.lowerMiddle /deep/ .el-carousel__container{
  height: 100% !important;
}
.lowerMiddle /deep/ .el-carousel__item{
  height: 100% !important;
}
.lowerMiddle /deep/ .img{
  width: 100%;
  height: 100%;
}
</style>

